<!DOCTYPE html>
<html lang="zh-Hans">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>简单的网页</title>
    <style>
      * {
        box-sizing: border-box;
      }

      /* body 样式 */
      body {
        font-family: Arial;
        margin: 0;
      }

      /* 标题 */
      .header {
        padding: 20px;
        text-align: center;
        background: #1abc9c;
        color: white;
      }
      .navbar {
        overflow: hidden;
        background-color: #333;
      }
      .navbar a {
        float: left;
        height: 40px;
        margin: 0;
        padding-top: 10px;
        padding-left: 20px;
        padding-right: 20px;
        color: white;
        text-decoration: none;
      }
      .navbar a.right {
        float: right;
      }
      .navbar a:hover {
        background-color: #ddd;
      }

      .row {
        display: flex;
      }
      .side {
        flex: 30%;
        background-color: #f2f2f2e6;
        padding: 20px;
      }
      .main {
        flex: 70%;
        padding: 20px;
      }
      .fakeimg {
        background-color: #aaaaaadf;
        width: 100%;
        padding: 20px;
      }
      .footer {
        padding: 20px;
        text-align: center;
        background-color: #555555e9;
        color: white;
      }
    </style>
  </head>
  <body>
    <div class="header">
      <h1>简单的页面</h1>
      <p>创建一个页面。</p>
    </div>

    <div class="navbar">
      <a href="#">链接</a>
      <a href="#">链接</a>
      <a href="#">链接</a>
      <a href="#" class="right">链接</a>
    </div>

    <div class="row">
      <div class="side">
        <h2>关于我</h2>
        <h5>我的照片:</h5>
        <div class="fakeimg" style="height: 200px">这边插入图像</div>
        <p>关于我的介绍..</p>
        <h3>更多内容</h3>
        <p>我的更多内容</p>
        <div class="fakeimg" style="height: 60px">这边插入图像</div>
        <br />
        <div class="fakeimg" style="height: 60px">这边插入图像</div>
        <br />
        <div class="fakeimg" style="height: 60px">这边插入图像</div>
      </div>
      <div class="main">
        <h2>标题</h2>
        <h5>副标题</h5>
        <div class="fakeimg" style="height: 200px">图像</div>
        <p>一些文本..</p>
        <br />
        <h2>标题</h2>
        <h5>副标题</h5>
        <div class="fakeimg" style="height: 200px">图像</div>
        <p>一些文本..</p>
      </div>
    </div>

    <div class="footer">
      <h2>底部内容</h2>
    </div>
  </body>
</html>
